<template>
	<div class="myAccount" pagecurrentscrolltop="0">
		<div class="head">
			<img src="@/assets/image/head.png" style="width: 2.5rem" />
			<div class="font">{{userinfo.username}}</div>
		</div>
		<div class="center_card">
			<div class="card_header">
				<div class="card_header_left" style="display: inline-block;display: flex;align-items: center;">
					<van-icon name="balance-pay" size="20" />
					<span class="card_title">{{$t('account.account1')}}</span>
				</div>
			</div>
			<div class="card_content">
				<div>
					<div style="display: inline-block; margin-left: 0.6rem">
						<div class="card_money_font">
							￥ <span class="card_content_money">{{userinfo.cashBackBalance}}</span>
						</div>
						<div class="center_card_description">{{$t('account.account1')}}</div>
					</div>
					<div style="display: inline-block; margin-left: 0.6rem">
						<div class="card_money_font">
							￥ <span class="card_content_money">{{userinfo.payableAmount}}</span>
						</div>
						<div class="center_card_description">{{$t('account.account2')}}</div>
					</div>
				</div>
				<div style="display: inline-block">
					<button class="card_button">
						<div class="card_button_font" @click="goPage('/balance')">{{$t('account.account3')}}</div>
					</button>
				</div>
			</div>
		</div>
		<div class="center_card_background"></div>
		<div class="deleteLine">
			<div class="van-cell-group van-hairline--top-bottom">
				<div style="display: none">
					<div class="cell van-cell">
						<div class="van-cell__title">
							<div class="cell_title">
								<div type="danger" class="cell_center">{{$t('account.account4')}}</div>
							</div>
						</div>
						<div class="cell_content">
							<span class="cell_content_font" style="padding-right: 6px">0 Points</span><img
								src=""
								style="width: 0.318rem; height: 0.5655rem" />
						</div>
					</div>
				</div>
				<div>
					<div class="cell van-cell">
						<div class="van-cell__title" @click="goPage('/referral')">
							<div class="cell_title">
								<van-icon name="contact" size="0.85rem" />
								<div type="danger" class="cell_center">{{$t('account.account5')}}</div>
							</div>
						</div>
						<div class="cell_content">
							<van-icon name="arrow" />
						</div>
					</div>
				</div>
				<div>
					<div class="cell van-cell">
						<div class="van-cell__title"  @click="goPage('/accountSettings')">
							<div class="cell_title">
								<img src=""
									class="cell_left" style="width: 0.85rem" />
								<div type="danger" class="cell_center">{{$t('account.account6')}}</div>
							</div>
						</div>
						<div class="cell_content">
							<img src=""
								style="width: 0.318rem; height: 0.5655rem" />
						</div>
					</div>
				</div>
				<div>
					<div class="cell van-cell">
						<div class="van-cell__title" >
							<div class="cell_title">
								<img src=""
									class="cell_left" style="width: 0.85rem" />
								<div  @click="goPage('/accountMenu')" type="danger" class="cell_center">
									{{$t('account.account7')}}
								</div>
							</div>
						</div>
						<div class="cell_content">
							<img src=""
								style="width: 0.318rem; height: 0.5655rem" />
						</div>
					</div>
				</div>
				<div>
					<div class="cell van-cell">
						<div class="van-cell__title"  @click="goPage('/contact')">
							<div class="cell_title">
								<img src=""
									class="cell_left" style="width: 0.85rem" />
								<div type="danger" class="cell_center">{{$t('account.account8')}}</div>
							</div>
						</div>
						<div class="cell_content">
							<img src=""
								style="width: 0.318rem; height: 0.5655rem" />
						</div>
					</div>
				</div>
				<div>
					<div class="cell van-cell">
						<div class="van-cell__title"  @click="goPage('/about')">
							<div class="cell_title">
								<img src=""
									class="cell_left" style="width: 1rem" />
								<div type="danger" class="cell_center">{{$t('account.account9')}}</div>
							</div>
						</div>
						<div class="cell_content">
							<img src=""
								style="width: 0.318rem; height: 0.5655rem" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="deleteLine">
			<div class="cell van-cell" style="margin-top: 0.6rem" @click="signOut">
				<div class="van-cell__title">
					<div class="cell_title">
						<img src=""
							class="cell_left" style="width: 0.85rem" />
						<div @click="goPage('/login')" type="danger" class="cell_center">{{$t('account.account10')}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "account",
		computed:{
			userinfo(){
				return this.$store.state.userinfo
			}
		},
		methods:{
			goPage(url){
				this.$router.push(url)
			},
			signOut(){
				this.$store.commit('SIGN_OUT') 
				this.showToast('Exit success','終了に成功しました')
				setTimeout(()=>{
					this.$router.replace('/home')
				},1000)
				console.log('退出登录')
			}
		}
	};
</script>

<style lang="scss" scoped>
	.center_card_background {
		z-index: -1;
		width: 100%;
		height: 3.5rem;
		background: #fff;
	}

	.cell_title {
		display: flex;
		align-items: center;
		.van-icon {
			margin-right: 0.5rem;
		}

		img {
			width: 0.85rem;
			object-fit: cover;
			margin-right: 0.5rem;
		}
	}

	.myAccount {
		height: 100%;
		background: #f5f5f5;
	}

	.myAccount .head {
		margin-left: 0.6rem;
		display: flex;
		align-items: center;
		height: 4.7rem;
	}

	.myAccount .head .font {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		height: 1.35rem;
		display: inline-block;
		padding-left: 0.6rem;
		font-size: 0.75rem;
		font-family: Segoe UI;
		font-weight: 700;
		line-height: 1.35rem;
		color: #222;
		opacity: 1;
	}

	.myAccount .center_card {
		position: relative;
		margin: 0 auto;
		margin-bottom: -2.3rem;
		box-sizing: border-box;
		width: 17.55rem;
		height: 5.2rem;
		padding: 0.6rem;
		background: #fff;
		box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 0.2rem;
		z-index: 2;
	}

	.myAccount .center_card .card_header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.myAccount .center_card .card_header .card_title {
		padding-left: 0.35rem;
		display: inline-block;
		font-size: 0.65rem;
		font-family: Segoe UI;
		font-weight: 600;
		line-height: 0.85rem;
		color: #222;
		opacity: 1;
	}

	.myAccount .center_card .card_content {
		margin-top: 0.5rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.myAccount .center_card .card_content .card_money_font {
		font-size: 0.75rem;
		font-family: Segoe UI;
		font-weight: 400;
		line-height: 1rem;
		color: #ffaf5b;
		opacity: 1;
	}

	.myAccount .center_card .card_content .card_money_font .card_content_money {
		font-size: 1rem;
		font-weight: 500;
	}

	.myAccount .center_card .card_content .center_card_description {
		margin-top: 0.5rem;
		font-size: 0.55rem;
		font-family: Segoe UI;
		font-weight: 400;
		line-height: 0.75rem;
		color: #222;
		opacity: 1;
	}

	.myAccount .center_card .card_content .card_button {
		width: 4rem;
		height: 1.5rem;
		background: #ffaf5b;
		position: absolute;
		top: 35%;
		right: .5rem;
		opacity: 1;
		border-radius: .2rem;
		color: #fff;
		border: none;
	}

	.myAccount .center_card .card_content .card_button .card_button_font[data-v-0e2c0654] {
		font-size: .65rem;
		font-family: Helvetica;
		font-weight: 400;
		line-height: .75rem;
		color: #fff;
		opacity: 1;
	}

	.van-cell {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 16px;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>
